let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
  ]
  let div = document.querySelector(".api-Class")
  let as = "";
  apiTypeData.forEach(function( v ){
      let name = v.name;
      let keyword = v.keyword;
      let isnew  = v.isnew;
    as+=`<a href="#" class ="${isnew? "on":""}" keyword="${keyword}">${name}</a>`;
  })
  div.innerHTML = as;

//   添加点击事件
  div.addEventListener("click",function( e ){
        if( e.target.nodeName.toLowerCase() ==="a"){
            console.log(e.target.getAttribute("keyword"));
            document.querySelector(".strong").innerHTML = e.target.textContent; 
            document.querySelector(".input").placeholder = e.target.getAttribute("keyword"); 
        }
  })

  let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
  ]

  let ul = document.querySelector(".enterprises");
  let uls = document.querySelector(".enterprises ul li");

    
 
  let lis = "";
  
  listDataArr.forEach(function( v ){
      lis+=`
      <li>
        <p class="enterprise ${v.isSpecial? "":"onsss"}">企业专用</p>
        <a href="./api-details.html">
            <img src="./img/${v.img}" alt="">
            <p class="username"> ${v.name}</p>
            <p class="free ${v.price ==="免费"? "":"onss"}">${v.price}</p>
        </a>
        <a class="date" href="#">申请数据</a>
        </li>
        `
  })

  ul.innerHTML = lis;

        ul.addEventListener( "click" ,function(e){
            if( e.target.className === "date"){
                document.querySelector(".mlode").style.display = "block"
               
            }
        })

    let mlode = document.querySelector(".mlode")
        mlode.addEventListener("click",function( e ){
            if( e.target.className === "mlode"){
                mlode.style.display = "none"
            }
        })













  let a = document.querySelector("a.ons");
  let aa = document.querySelector("a.ison");
  console.log(aa);
  let b = document.querySelector(".qrcode")
  console.log(b);
      
  a.addEventListener("click",function(){
      b.style.display = "block";
  })
  aa.addEventListener("click",function(){
      b.style.display = "none";
  })
